<template>
	<div class="star-hosts-box">
		<div class="top-box">
			<p class="left-p">主播风采</p>
			<div class="more-box" @click="clickHomeModluNore"> 
				<p>更多</p>
				<Iconfont iconClass="iconfont iconyoujiantou" />
			</div>
		</div>
		<ul class="star-ul">
			<li v-for="v of listArray" :key = 'v.id' @click="goToAnchorPage(v.contentType,v.id)">
				<img :src="v.zbHeadImg+'?x-oss-process=image/resize,m_fixed,h_183,w_324'"  />
				<p class="p-name">{{v.title}}</p>
				<p class="p-info">{{v.zbIntro}}</p>
			</li>
		</ul>
	</div>
</template>

<script>
		export default {
		props: {
			anchorStarArray: Object,
		},
		data() {
			return {
				listArray:[],//热门主播列表
			}
		},
		computed: {},
		created() {
			this.listArray = this.anchorStarArray;
		},
		watch:{
		},
		mounted() {
		},
		methods: {
			clickHomeModluNore() {
				this.$router.push(`/${this.$channel}/starAnchorMore`);
			},
			goToAnchorPage(type,id){ 
				if(type==='1'){//内容 
					this.$router.push({
					path: `/${this.$channel}/connectShow`,
					query: {
						id:id
					}
				});
				}else if(type==='2'){//视频 
					this.$router.push({
		             path: `/${this.$channel}/videoMiddleBgBlackPlay`,
		             query: {
			            id:id
			          }
		         });
				}else{
					console.log('暂无明星主播类型')
				}
			}
		}
	};
</script>

<style scoped="scoped">
	.iconyoujiantou{
		font-size: 24px;
	}
	.star-ul{
		width: 100vw;
		display: flex;
		overflow: scroll;
		padding-left: 32px;
	}
	.star-ul li{
		height: 294px;
		margin-right:20px;
		background: rgba(255, 255, 255, 0.4);
		border-radius: 24px;
	}
	.star-ul li img{
		width: 324px;
		height: 183px;
		border-radius: 24px;
	}
	.star-ul  li p{
		width: 324px;
		font-size: 28px;
		color: #3B3B3B;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

	}
	.star-ul  li .p-name{
		padding: 0 16px;
		margin-top: 12px;
		font-size: 28px;
		font-weight: bold;
		color: #3B3B3B;
		line-height: normal;
	}
	.star-ul  li .p-info{
		padding: 0 16px;
		margin-top: 6px;
		margin-bottom: 12px;
		font-size: 27px;
		font-weight: 400;
		color: #929292;
		line-height: normal;		
	}
	.star-hosts-box{
		width: 100vw;
		/* height: 393px; */
		/*background: darkgray;*/
	}
	.top-box{
		width:100vw ;	
		display: flex;
		align-items: center;
		margin-top: 48px;
		margin-bottom: 24px;
		/*justify-content: flex-start;
		align-items: center;*/
		/*background: saddlebrown;*/
	}
		.more-box{
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-right: 30px;
		font-size: 27px;
		font-weight: 500;
		color: #777777;
	}
	.more-box p{
		font-size: 27px;
		font-weight: 400;
		color: #777777;
		margin-right: 3px;
	}
	.left-p{
		display: flex;
		align-items: center;
		margin-left: 32px;
		font-size: 35px;
		font-weight: 800;
		color: #34323F;		
	}
	 .left-p::before{
		content: " ";
		height: 44px;
		width: 44px;
		margin-right: 16px;
		background: url('../../assets/images/zxyh/anchor_style.png') no-repeat;
		background-size: 100% 100% ;
    }
</style>